<template>
  <div class="personal-center-container">
    <el-tabs v-model="activeTab">
      <!-- 我的问题 -->
      <el-tab-pane label="我的问题" name="myQuestions">
        <el-card
            v-for="question in myQuestions"
            :key="question.id"
            shadow="hover"
            class="question-card"
            @click="goToQuestionDetail(question.id)"
        >
          <h3>{{ question.title }}</h3>
          <p class="question-content">{{ question.content }}</p>
          <div class="question-meta">
            <span>{{ formatTime(question.createdAt) }}</span>
            <el-tag>{{ question.answersCount }} 个回答</el-tag>
            <el-button type="text" @click="deleteQuestion(question.id)">删除</el-button>
          </div>
        </el-card>
      </el-tab-pane>

      <!-- 我的回答 -->
      <el-tab-pane label="我的回答" name="myAnswers">
        <el-card
            v-for="answer in myAnswers"
            :key="answer.id"
            shadow="hover"
            class="answer-card"
        >
          <div class="answer-content" v-html="answer.content"></div>
          <div class="answer-meta">
            <span>所属问题：{{ answer.question.title }}</span>
            <span>{{ formatTime(answer.createdAt) }}</span>
            <el-tag>{{ answer.likesCount }} 个点赞</el-tag>
            <el-button type="text" @click="deleteAnswer(answer.id)">删除</el-button>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const router = useRouter()
const activeTab = ref('myQuestions')
const myQuestions = ref<any[]>([])
const myAnswers = ref<any[]>([])

// 获取“我的问题”
const fetchMyQuestions = async () => {
  try {
    const res = await axios.get('/api/users/my/questions')
    myQuestions.value = res.data
  } catch (err) {
    ElMessage.error('获取“我的问题”失败')
    console.error(err)
  }
}

// 获取“我的回答”
const fetchMyAnswers = async () => {
  try {
    const res = await axios.get('/api/users/my/answers')
    myAnswers.value = res.data
  } catch (err) {
    ElMessage.error('获取“我的回答”失败')
    console.error(err)
  }
}

// 跳转到问题详情
const goToQuestionDetail = (id: number) => {
  router.push({ name: 'QuestionDetail', params: { id } })
}

// 删除问题（软删除）
const deleteQuestion = async (id: number) => {
  try {
    await axios.delete(`/api/questions/${id}`)
    ElMessage.success('问题删除成功～')
    fetchMyQuestions() // 刷新列表
  } catch (err) {
    ElMessage.error('问题删除失败，请重试')
    console.error(err)
  }
}

// 删除回答（软删除）
const deleteAnswer = async (id: number) => {
  try {
    await axios.delete(`/api/answers/${id}`)
    ElMessage.success('回答删除成功～')
    fetchMyAnswers() // 刷新列表
  } catch (err) {
    ElMessage.error('回答删除失败，请重试')
    console.error(err)
  }
}

// 时间格式化
const formatTime = (time: string) => new Date(time).toLocaleString()

onMounted(() => {
  fetchMyQuestions()
  fetchMyAnswers()
})
</script>

<style scoped>
.personal-center-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.question-card {
  cursor: pointer;
  margin-bottom: 15px;
}
.question-content {
  margin: 10px 0;
  line-height: 1.6;
}
.question-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #666;
  font-size: 14px;
}
.answer-card {
  margin-bottom: 15px;
}
.answer-content {
  line-height: 1.6;
  margin-bottom: 10px;
}
.answer-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #666;
  font-size: 14px;
}
</style>